<!DOCTYPE html>
<html lang="en">

<head>

	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Sen Fang 4650134</title>

	<!-- CSS -->
	<link rel="stylesheet" href="CSS/fonts.css">
	<link rel="stylesheet" href="CSS/bootstrap.min.css">
	<link rel="stylesheet" href="CSS/select2.css">
	<link rel="stylesheet" href="CSS/gray.css">
	<link rel="stylesheet" href="CSS/magnific-popup.css">
	<link rel="stylesheet" href="CSS/form-elements.css">
	<link rel="stylesheet" href="CSS/buttons.css">
	<link rel="stylesheet" href="CSS/style.css">
	<link rel="stylesheet" href="CSS/media-queries.css">


</head>

<body data-spy="scroll" data-target="#navbar-site" data-offset="80">
	<style>
		html {
			height: 100%;
		}

		body {
			background-image: url('images/英国会议大厦.jpg');
			background-repeat: no-repeat;
			background-attachment: fixed;
			background-size: 100% 100%;
		}
	</style>

	<nav id="navbar-site" class="navbar navbar-dark bg- navbar-expand-sm fixed-top right">

		<div class="container">
			<a class="navbar-brand" href="#home">Sen Fang 4650134</a>
			<ul class="navbar-nav">
				<li class="nav-item"><a class="nav-link" href="#home">Home</a></li>
				<li class="nav-item"><a class="nav-link" href="#form">Form</a></li>
				<li class="nav-item"><a class="nav-link" href="#table1">Table 1</a></li>
				<li class="nav-item"><a class="nav-link" href="#carousel">Carousel</a></li>
				<li class="nav-item"><a class="nav-link" href="#table2">Table 2</a></li>
				<li class="nav-item"><a class="nav-link" href="#jumbotron">Jumbotron</a></li>
				<li class="nav-item"><a class="nav-link" href="#collapsible">Collapsible</a></li>
				<li class="nav-item"><a class="nav-link" href="#card">Card</a></li>

				<div class="dropdown">
					<button class="btn btn-secondary dropdown-toggle" type="button" id="triggerId"
						data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
						More : Additional exercises
					</button>
					<div class="dropdown-menu" aria-labelledby="triggerId">
						<a class="dropdown-item" href="#model">Model</a>
						<a class="dropdown-item" href="#mediaobject">Media Object</a>
						<a class="dropdown-item" href="#tooltip">Tooltip</a>
						<a class="dropdown-item" href="#video">Other exercises : video</a>
						<a class="dropdown-item" href="#popover">Popover</a>
						<div class="dropdown-divider"></div>
						<a class="dropdown-item" href="#footer">Footer</a>
					</div>
				</div>
		</div><!-- navbar-nav -->
		</ul><!-- container -->
	</nav>




	<div class="container mt-3" id="home">
		<br> <br>

		<div class="row">
			<div class="col-sm-12 top-content-text">
				<h1>
					Into classical art<br>
				</h1>
				<span class="top-content-text-big">Aesthetic feeling is inseparably united with auditory sense of vision
					together, leave auditory sense of vision, it is inconceivable. --Chernyshevsky</span>

			</div>
		</div>

		<video width="960" height="720" controls autoplay id=video>
			<source src="video/歌剧魅影ThePhantomoftheOpera.mp4" type="video/mp4">
			<source src="video/歌剧魅影ThePhantomoftheOpera.Ogg" type="video/ogg">
			<source src="video/歌剧魅影ThePhantomoftheOpera.webm" type="video/webm">
			<object data="video/歌剧魅影ThePhantomoftheOpera.mp4" width="320" height="240">
				<embed width="500" height="500" src="video/歌剧魅影ThePhantomoftheOpera.swf">
			</object>
		</video>

		<div class="row">

		</div>

		<!-- ROW 1 -->
		<h2>Classical music and paintings</h2>
		<div class="row">
			<section class="col">
				<img src="images/心形音乐谱.jpg" alt="sample image">
				<h4>History and Genre</h4>
				<p>It is divided into four major periods by period:</p>
				<p> 1. The Baroque Period;</p>
				<p> 2. The Classical Period;</p>
				<p> 3. The Romantic Period;</p>
				<p> 4. Impressionism and Modernism.</p>
				<p> By genre:</p>
				<p> Symphony, Solo, Ensemble, Concerto, etc.</p>
			</section>
			<section class="col">
				<img src="images/贝多芬.jpg" alt="sample image">
				<h4>Representative personage</h4>
				<p>Johann Sebastian Bach (March 21, 1685 -- July 28, 1750) was a German composer of the Baroque period.
					He was one of the most important composers in the history of music, and is widely regarded as the
					"Father of Modern Western Music".</p>
				<p>Wolfgang Amadeus Mozart (27 January 1756 -- 5 December 1791) was a European composer of classical
					music, born in Salzburg during the Holy Roman Empire.</p>
				<p>Franz Joseph Haydn (March 31, 1732 - May 31, 1809), the founder of the Vienna classical pie, the
					father of the symphony.</p>
				<p> Ludwig van Beethoven (on December 16, 1770 - March 26, 1827), was born in Bonn, Germany, to be one
					of the Vienna classical pie, European classicism period composer.</p>
			</section>
			<section class="col">
				<img src="images/音乐会.jpg" alt="sample image">
				<h4>Representative works</h4>
				<p>1. Matthew's Passion by Bach</p>
				<p>2. The Marriage of Figaro by Mozart</p>
				<p>3. Beethoven's Symphony of Destiny</p>
				<p>4. Sonata in E Flat Major by Wagner</p>
				<p>5. The Last Seven Words of Christ on the Cross by Haydn</p>
				<p>6. "Lullaby" by Brahms</p>
				<p>7. Serenade by Schubert</p>
				<p>8. A Poet in Love by Schumann</p>
				<p>9. The Messiah by Handel</p>
				<p>10. Swan Lake by Tchaikovsky</p>
			</section>
		</div><!-- row -->

		<!-- ROW 2 -->
		<div class="row">
			<section class="col">
				<img src="images/油画4.jpeg" alt="sample image">
				<h4>History and Genre</h4>
				<p>Painting is generally divided into eastern painting and western painting two systems, from the kinds
					of painting to the points, it can be divided into Chinese painting, oil painting, printmaking,
					watercolor painting, gouache, sketch, etc. </p>
				<p>What do Oriental painting and Western painting refer to? </p>
				<p>Oriental paintings from ancient Egypt and developed eastern civilization with painting, such as China
					and the western painting is developed from ancient Greek and Roman in Europe as the center of the
					painting, this is the world's two big drawing system, the most important contributions to the
					civilization of painting has a direct performance ability, is an art of human is very easy to
					accept.
				</p>
			</section>
			<section class="col">
				<img src="images/油画5.jpeg" alt="sample image">
				<h4>Representative personage</h4>
				<p>Michelangelo (1475-1564) Sculptor, architect, painter, and poet.He pursued the perfection of art all
					his life and insisted on his own artistic ideas.He died in Rome in 1564, and his style has
					influenced artists for almost three centuries.</p>
				<p>Leonardo da Vinci (April 15, 1452 -- May 2, 1519) was perhaps more gifted than any other figure of
					his time, making him the quintessence of Renaissance humanism and one of the most famous painters of
					all time,Along with Michelangelo and Raphael, they are the Three Masters of the Renaissance.</p>
				<p>Claude Monet (November 14, 1840 -- December 5, 1926) was a French painter and one of the founders of
					Impressionism.Monet was one of the most important French painters who popularized most of the theory
					and practice of Impressionism.Monet was good at experimental and expressive techniques of light and
					shadow.</p>
				<p>Vincent Willem van Gogh (1853-1890) was a Dutch post-impressionist painter.He was a pioneer of
					expressionism and had a profound influence on 20th century art, particularly fauvism and
					expressionism.It now ranks among the world's most famous, widely known and expensive works of art.
				</p>
			</section>
			<section class="col">
				<img src="images/油画6.jpeg" alt="sample image">
				<h4>Representative works</h4>
				<p>"The World's Top Ten Famous Oil Paintings" has long been handed down from generation to generation
				</p>
				<p> and has become famous as a hot classic masterpiece in the art world. They are </p>
				<p> 1.The Unknown Girl</p>
				<p> 2.The Sleeping Venus</p>
				<p> 3.Mona Lisa</p>
				<p> 4.The Sorceress</p>
				<p> 5.Meninas</p>
				<p> 6.The Portrait of Helena Furman</p>
				<p> 7.The Pearl Girl</p>
				<p> 8.The Boy with the Pipe</p>
				<p> 9.The Sunflowers</p>
				<p> 10.The Sistine Madonna</p>
			</section>
		</div><!-- row -->

		<a id="form"></a>
		<br><br>
		<!-- start of second exercise -->

		<div class="container-fluid">
			<h2>Submit information and learn more</h2>
			<form id="form" method="post" action=""></form>
			<div class="form-group">
				<label for="Name">Name:</label>
				<input type="text" id="ad9" class="form-control" aria-describedby="helpId">

				<div class="form-group">
					<label for="email">Email address:</label>
					<input type="email" class="form-control" id="email">

					<div class="form-group">
						<label for="pwd">Password:</label>
						<input type="password" class="form-control" id="pwd">
					</div>
					<div class="form-check">
						<label class="form-check-label"><input class="form-check-input" type="checkbox"> Remember me
						</label>
					</div>
					<button type="submit" class="btn btn-primary">Submit</button>
					</form>

					<!-- end  of second exercise -->
					<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
					<br> <br> <br> <br>


					<div class="container">
						<h1>The Development and Evolution of Classical Music</h1>
						<table class="table table-striped table-bordered table-sm table-responsive" id="table1">
							<table class="table">
								<thead>
									<tr>
										<th>Period</th>
										<th>Trait</th>
										<th>Time</th>
										<th>Representative</th>

									</tr>
								</thead>
								<tbody>
									<tr>
										<td scope="row">The Baroque Period </td>
										<td>Gorgeous and complex</td>
										<td>1600-1750</td>
										<td>Opera, concerto, sonata</td>

									</tr>
									<tr>
										<td scope="row">The Classical Period</td>
										<td>Simple and concise, rigorous and harmonious</td>
										<td>1750-1820</td>
										<td>Haydn, Mozart, Beethoven</td>

									</tr>
									<tr>
										<td scope="row">The Romantic Period</td>
										<td>Intense, free, unrestrained</td>
										<td>1820-1900</td>
										<td>Nocturnes, improvisations, ballads, scherzos, fantasias and lyricless songs
										</td>

									</tr>
									<tr>
										<td>Impressionism and Modernism</td>
										<td>Innovate</td>
										<td>1900-now</td>
										<td>A Guide to Orchestral Music for Young People, Sinfonietta, Pauchinella,
											Petrojka</td>

									</tr>
								</tbody>
							</table>
						</table>
						<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
						<br> <br> <br> <br> <br>
						<div class="container-fluid">
							<!--创建一个轮播-->
							<div id="carousel" class="carousel slide">
								<!-- 轮播（Carousel）指示器 -->
								<ol class="carousel-indicators">
									<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
									<li data-target="#myCarousel" data-slide-to="1"></li>
									<li data-target="#myCarousel" data-slide-to="2"></li>
									<li data-target="#myCarousel" data-slide-to="2"></li>
									<li data-target="#myCarousel" data-slide-to="2"></li>
								</ol>
								<!-- 轮播（Carousel）项目 -->
								<div class="carousel-inner">
									<h3>Carousel</h3>
									<div class="carousel-item active">
										<img src="images/油画5.jpeg" alt="First slide" style="width: 100%;height: 500px;">
										<div class="carousel-caption">
										</div>
									</div>
									<div class="carousel-item">
										<img src="images/油画6.jpeg" alt="Second slide"
											style="width: 100%;height: 500px;">
										<div class="carousel-caption">

										</div>
									</div>
									<div class="carousel-item">
										<img src="images/辽阔天空.jpg" alt="Third slide" style="width: 100%;height: 500px;">
										<div class="carousel-caption">

										</div>
									</div>
									<div class="carousel-item">
										<img src="images/日出印象.jpg" alt="Fourth slide"
											style="width: 100%;height: 500px;">
										<div class="carousel-caption">

										</div>
									</div>
									<div class="carousel-item">
										<img src="images/桥.jpg" alt="Fivth slide" style="width: 100%;height: 500px;">
										<div class="carousel-caption">
										</div>
									</div>
								</div>
								<!-- 轮播（Carousel）导航 -->
								<a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev">
									<span class="carousel-control-prev-icon"></span>
								</a>
								<a class="carousel-control-next" href="#carousel" role="button" data-slide="next">
									<span class="carousel-control-next-icon"></span>
								</a>
							</div>
							<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
							<br> <br> <br> <br> <br> <br>
							<div class="container">
								<h1>The Development and Evolution of Classical Paintings</h1>
								<table class="table table-striped table-bordered table-sm table-responsive" id="table2">
									<table class="table">
										<thead>
											<tr>
												<th>Period</th>
												<th>Trait</th>
												<th>Time</th>
												<th>Representative</th>

											</tr>
										</thead>
										<tbody>
											<tr>
												<td scope="row">Middle Ages </td>
												<td>Emphasize the expression of the spiritual world</td>
												<td>5th century AD to 15th century AD</td>
												<td>In combination with religious architecture, sculpture, mosaics and
													murals also achieved some success</td>

											</tr>
											<tr>
												<td scope="row">Renaissance</td>
												<td>Adhere to the realistic method and reflect humanism thought</td>
												<td>14th century AD to 16th century AD</td>
												<td>Leonardo da Vinci, Michelangelo and Raphael</td>

											</tr>
											<tr>
												<td scope="row">Post-Renaissance era</td>
												<td>The three centuries have different characteristics.</td>
												<td>17th century AD to 19th century AD</td>
												<td>Rembrandt, Watteau, Boucher and Fragonard, Cezanne, Van Gogh and
													Gauguin</td>

											</tr>
											<tr>
												<td>Mordern Paintings</td>
												<td>The schools are repeated and varied</td>
												<td>19th-now</td>
												<td>Ernst, Pollock, de Kooning, Kandinsky, Close, Pelstein</td>

											</tr>
										</tbody>
									</table>
								</table>
								<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
								<br> <br> <br> <br> <br> <br> <br>
								<div class="container">
									<div class="jumbotron jumbotron-fluid" id="jumbotron">
										<h1 class="display-3">Jumbotron exercise</h1>
										<p> 1、I write for no other purpose than to add to the beauty that now belongs to
											me. (Jack London, American writer)</p>
										<p> 2、Art is the stored honey of the human soul, gathered on wings of misery and
											travel. (Theocore Dreser, American novelist)</p>
										<p> 3、A picture is a poem without words. (Horace, ancient Roman poet)</p>
										<p> 4、In music one must think with the heart and feel with the brains. Victor
											Hugo, French writer Jazz tickles your muscles, symphonies stretch your soul.
											(PaulWhiteman, American conductor)</p>
										<p> 5、Music is the only language in which you cannot say a mean or sarcastic
											thing. (John Erskine, American educator)</p>
										<p> 6、Any one who conducts an argument by appealing to authourity is not using
											his intelligence; he is just using his memory. (Da Vinci, Italian painter)
										</p>
										<p> 7、Art is a lie that tells the truth. (Picasso, Spanish painter)</p>
										<p> 8、Art is long, and time is fleeting. (Longfellow, American poet)</p>
										<p> 9、Art is much less important than life, but what a poor life without it !
										</p>
										<p> 10、Art is not a handicraft, it is the transmission of feeling theorist has
											experienced. (Len Tolstoy, Russian writer)</p>
									</div>
								</div>
								<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
								<br> <br> <br> <br> <br> <br> <br>
								<div class="container">
									<h1>leading characters</h1>

									<div class="card">
										<div class="card-header" id="collapsible">
											<a class="card-link" data-toggle="collapse" href="#collapseOne">
												Symphony </a>
										</div>
										<div id="collapseOne" class="collapse " data-parent="#accordion">
											<div class="card-body"> A symphony is a large orchestral composition
												consisting of several movements, usually written for an orchestra.A
												symphony is a large orchestral suite, derived
												from an Italian opera overture.The name "symphony" comes from the Greek
												word meaning "to sound together".By the second half of the eighteenth
												century it had developed into an
												independent orchestral work, usually consisting of four movements
												(sometimes with an adagio introduction) and occasionally more or less
												than four movements. </div>
										</div>
									</div>
									<div class="card">
										<div class="card-header">
											<a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo">
												Solo </a>
										</div>
										<div id="collapseTwo" class="collapse show" data-parent="#accordion">
											<div class="card-body"> One of the forms of musical performance.A person
												playing an instrument is called a soloist.Such as accordion solo, piano
												solo and so on.Sometimes one
												solo, accompanied by another.The word solo has a broader meaning.For
												example, in the total score, except that the leader of each stringed
												instrument group plays the solo
												part, other instruments play a prominent part role in some paragraphs,
												sometimes also marked as "solo". </div>
										</div>
									</div>
									<div class="card">
										<div class="card-header">
											<a class="collapsed card-link" data-toggle="collapse" href="#collapseThree">
												Ensemble </a>
										</div>
										<div id="collapseThree" class="collapse" data-1parent="#accordion">
											<div class="card-body"> An instrumental composition with multiple parts
												played by one person for each part and its form of performance.According
												to the part
												of the music and the number of players, it can be divided into duets,
												trios, sevets, octets and so on.Due to the different Musical
												Instruments, there are
												piano trio, string quartet, wind quintet and so on. </div>
										</div>
									</div>
								</div>
							</div>

							<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
							<br> <br> <br> <br> <br> <br>


						</div><!-- container -->


						<!--Card(RECORD)-->
						<div class="container" id="card">
							<h1 style="padding: 0%; color: black;">This is some crazy records :</h1>

							<div class="card">

								<div class="card bg-info">
									<div class="card-body">
										<h3>Beethoven</h3>
										<p class="card-text" style="font-size: 20px;"><img src="images/贝多芬.jpg"
												width="150" lang="150" align="right">Beethoven in his father's harsh
											education spent his childhood, created his stubborn, sensitive and exciting
											character.At the age of 22, he settled in Vienna all his life and composed
											the Third Symphony from 1803 to 1804, which marked the mature stage of his
											composition.Over the next 20 years or so, his numerous works, with their
											strong artistic appeal and grandeur, pushed classical music to its peak and
											heralded the arrival of Romantic music in the 19th century.On March 26,
											1827, Beethoven died in Vienna at the age of 57</p>
									</div>
								</div>

								<div class="card bg-warning">
									<div class="card-body">
										<h3>Vincent Willem van Gogh</h3>
										<p class="card-text" style="font-size: 20px;"><img src="images/没有胡子的自画像.jpg"
												width="150" lang="150" align="right">Van Gogh was born on March 30,
											1853, in the Dutch countryside of Zundert to a Protestant clerkship. In his
											early years, he worked as a clerk and trade broker, as well as a missionary
											in the mines, and finally turned to painting.His early painting style is
											realistic, influenced by Dutch traditional painting and French realism
											painting school.In 1886, he went to Paris, met the Impressionist and
											Neo-Impressionist painters, and came into contact with the works of the
											Japanese Ukiyo-e. The expansion of his vision changed his painting style
											greatly.In 1888, he came to Arles, a small town in the south of France, and
											created "Arles' Suspend Bridge".In the same year, he became involved with
											the painter Paul Gauguin, but because of the conflict of their personalities
											and differences of ideas, the cooperation soon failed.Van Gogh suffered from
											frequent bouts of madness (described by some as "epilepsy"), but he
											continued to paint when he was conscious.He wrote Starry Night in 1889.In
											July 1890, van Gogh shot himself in a delirium at the age of 37.</p>
									</div>
								</div>
							</div>
						</div>

						<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
						<br>

						<!-- Button trigger modal -->
						<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modelId"
							id=model>
							Learn more about the works of Van Gogh
						</button>

						<!-- Modal -->
						<div class="modal fade" id="modelId" tabindex="-1" role="dialog" aria-labelledby="modelTitleId"
							aria-hidden="true">
							<div class="modal-dialog" role="document">
								<div class="modal-content">
									<div class="modal-header">
										<h5 class="modal-title">Art is life</h5>
										<button type="button" class="close" data-dismiss="modal" aria-label="Close">
											<span aria-hidden="true">&times;</span>
										</button>
									</div>
									<div class="modal-body">
										<div class="container-fluid">
											<p>1. The Potato Eater</p>
											<p>2. The Two Cypress Trees</p>
											<p>3. Self-Portrait by Saint Remy</p>
											<p> 4. A Rye Field with Crows</p>
											<p> 5. The Boy Who Mowed the Lawn</p>
											<p> 6. Women in the Coal Mine</p>
											<p> 7. Still Life: The Open Bible</p>
											<p> 8. "The Row of Houses in the Street"</p>
											<p> 9. The Woman with a Carnation</p>
											<p> 10. The Suspension Bridge Through the Carriages</p>
											<p> 11. 'The Sower of the Sunset'</p>
											<p> 12. The Old Man with His Head</p>
											<p> 13. 'Sorrow'</p>
											<p> 14. Sunflower</p>
											<p> 15. Starry Night</p>
											<p> 16. 'Night Cafe -- Inside'</p>
											<p> 17. 'Night Cafe -- Exterior'</p>
											<p> 18. Van Gogh's Bedroom</p>
											<p> 19. "Madame Genu, the Woman of Arz", "Self-portrait of a pipe with
												abandage in her ears"</p>
											<p> 20. "Red Grape Circle"</p>
											<p> 21. Sunflower</p>
											<p> 22. "A Rye Field with Crows"</p>
											<p> 23. Soldiers of Algeria (Bust)</p>
											<p> 24. 'Gauguin's Chair'</p>
											<p>25. "Japanese Spice: Plum Blossoms (Imitation of Hiroshige)"</p>
											<p> 26. Japanese Sentiment: Oroquin (in the Imitation of Yingquan)</p>
											<p>27. Van Gogh's Bedroom</p>
											<p> 28. The Fishing Boat on the Shore</p>
											<p>29. Self-Portrait</p>
											<p>30. Boughs of the Flowering Almond Tree</p>
											<p>31. 'Vase of Purple Iris'</p>
											<p>32. The Woman at the Tambourine Cafe</p>
											<p> 33. Van Gogh's Chair</p>
										</div>
									</div>
									<div class="modal-footer">
										<button type="button" class="btn btn-secondary"
											data-dismiss="modal">Close</button>
										<button type="button" class="btn btn-primary">Save</button>
									</div>
								</div>
							</div>
						</div>

						<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
						<br>

						<!--media object-->
						<div class="media border p-3" id="mediaobject">
							<img src="images/夕阳山坡.jpg" alt="1" class="mr-3 mt-3 roundedcircle"
								style="width:650px; height: 383px;">
							<!--在media-body内嵌套media-->
							<div class="media-body">
								<p style="color: black;"><small><i>Benjamin Williams Leader (12 March 1831 solstice 22
											March 1923) was an English landscape painter.In 1898, he became a member of
											the Royal College of Art in London, England.Leader's father was a dedicated
											amateur artist and a friend of John Constable, with whom Benjamin often
											accompanied him sketching on the banks of the River Severn.His brother
											Edward Reid Williams, who went on to become a distinguished civil engineer,
											was knighted for his work and is now chiefly remembered for designing the
											Manchester Ship Canal -- which later became the subject of Leader's largest
											painting.</i></small></p>
							</div>
						</div>

						<h id="tooltip" style="color: aliceblue; font-size: xx-large; text-align: center;">This is a
							tool tip</h>
						<a href="#" data-toggle="tooltip" title="Return to the beginning of the page"></a>
						<br />
						<button type="button" class="btn btn-secondary mt-3" data-toggle="tooltip"
							style="font-size: x-large;"
							title="Tomas turned the key and switched on the ceiling light. Tereza saw two beds pushed together, one of them flanked by a bedside table and lamp. Up out of the lampshade, startled by the overhead light, flew a large nocturnal butterfly that began circling the room. The strains of the piano and violin rose up weakly from below."
							data-placement="top">
							Place the mouse over it to see</button>

						<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
						<br>

						<div class="container" id=popover style="padding: 100px 50px 10px;">
							<button type="button" class="btn btn-secondary mt-3"
								title="Popovers, like tooltips, provide an extended view.To activate the pop-up box, the user simply hovers the mouse over the element."
								data-container="body" data-toggle="popover" data-placement="bottom"
								data-content="All the exercises have been completed.">
								Popover : Place the mouse over it
							</button>
						</div>

						<script>
							$(function () {
								$("[data-toggle='popover']").popover();
							});
						</script>
					</div>


					<h2>Image shape exercises are reflected everywhere. I have Nav tabs</h2>


					<!--footer-->
					<footer id="footer">
						<div style="text-align:center">
							<p>Made by : 4650134 Wirth</p>
							<a href="#home">Click here to go back to the top</a>
							<p id="warning">Assignment : Bootstrap Exercise</p>
							<p>2021.5.15</p>
							<style>
								p {
									font-size: 20px;
								}
							</style>
						</div>
					</footer>

					<script src="js/jquery.slim.min.js"></script>
					<script src="js/popper.min.js"></script>
					<script src="js/bootstrap.min.js"></script>


</body>

</html>